<template>
  <div class="loginContainer">
    <div class="inView">
      <!-- 头部 -->
      <div class="header">
        <van-icon @click="loginToHome" class="leftIcon" name="wap-home-o" />
        网易严选
        <div class="rightIcon">
          <van-icon @click="loginToSearch" class="centerIcon" name="search" />
          <van-icon @click="loginToCard" name="shopping-cart-o" />
        </div>
      </div>
      <!-- 头部以下 -->
      <div class="underView">
        <div class="imgView">
          <!-- src="../../static/images/login/wangyi.png" -->
          <img
            class="imgItem"
            width="40%"
            height="15%"
            src="https://yanxuan.nosdn.127.net/static-union/164793255107785e.png"
            alt=""
          />
        </div>
      </div>
      <!-- 按钮 -->
      <div class="btnView">
        <van-button
          @click="handerLogin"
          class="btnItem"
          type="danger"
          size="large"
        >
          <van-icon
            style="margin-right: 15px"
            name="graphic"
          />手机号快捷登录</van-button
        >
        <van-overlay :show="show" @click="show">
          <div class="wrapper" @click.stop>
            <div class="block">
              <van-form @submit="handerLogin">
                <van-field
                  v-model="username"
                  name="用户名"
                  label="用户名"
                  placeholder="手机号"
                  :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                  v-model="password"
                  type="password"
                  name="密码"
                  label="密码"
                  placeholder="密码"
                  :rules="[{ required: true, message: '请填写密码' }]"
                />
                <div style="margin: 16px">
                  <van-button round block type="info" native-type="submit"
                    >提交</van-button
                  >
                </div>
              </van-form>
            </div>
          </div>
        </van-overlay>

        <van-button
          class="btnItem"
          type="default"
          plain
          hairline
          size="large"
          color="red"
        >
          <van-icon style="margin-right: 15px" name="envelop-o" />
          邮箱账号登陆</van-button
        >
      </div>
      <!-- 底部登录 -->
      <div class="bottomView">
        <div class="bottomItem">
          <van-icon class="iconItem" name="wechat" />微信
        </div>
        <div class="bottomItem">
          <van-icon class="iconItem" name="alipay" />支付宝
        </div>
        <div class="bottomItem">
          <van-icon class="iconItem" name="wechat" />微博
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reqLogin } from "@/api";
import { saveToken } from "@/utils/auth";
import Vue from "vue";
import { Overlay, Notify } from "vant";

Vue.use(Overlay);
export default {
  name: "login",
  data() {
    return {
      username: " ",
      password: " ",
      show: false,
    };
  },
  methods: {
    // 跳转到首页的图标
    loginToHome() {
      this.$router.push("/home");
    },
    loginToSearch() {
      // 跳转到搜索的图标
      this.$router.push("/search");
    },
    // 跳转到购物车的图标
    loginToCard() {
      this.$router.push("/cart");
    },
    // 点击登录
    async handerLogin(values) {
      this.username = values["用户名"];
      this.password = values["密码"];
      // console.log(this.username, this.password);
      this.show = true;
      if (this.username != undefined && this.password.trim() != undefined) {
        //发起登录请求--》获取token
        let result = await reqLogin({
          phone: this.username,
          password: this.password,
        });
        if (result.code === 200) {
          this.show = false;
          Notify({ type: "success", message: "登陆成功" });
          //本地存储token
          saveToken(result.data.token);
          // 发起请求获取用户信息，存入vuex
          this.$store.dispatch("getLoginUserInfo");
          // 跳转路由
          this.$router.push("/home");
        } else {
          this.show = false;
          Notify({ type: "danger", message: "登录失败" });
        }
      } else {
      }
    },
  },
};
</script>

<style lang="less" scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 80%;
  height: 25%;
  background-color: #fff;
}
.inView {
  margin-top: 2rem;
}

.loginContainer {
  width: 100%;
  height: 100%;

  box-sizing: border-box;
  background: #f3f4f4;
  .header {
    // border-top:0.02rem solid #d8d8d8 ;
    margin-top: -2.1rem;
    display: flex;
    justify-content: space-between;
    font-size: 0.747rem;
    font-family: 宋体;
    font-weight: 800;
    background: #fafafa;
    padding: 0.27rem;
    .leftIcon {
      margin-top: 0.08rem;
      margin-right: 0.667rem;
    }
  }
  .loginContainer {
    width: 100%;
    height: 100%;
    // padding: 0.19rem 0.19rem 0.4rem;
    box-sizing: border-box;
    background: #f3f4f4;
    .header {
      display: flex;
      justify-content: space-between;
      font-size: 0.747rem;
      font-family: 宋体;
      font-weight: 800;
      background: #fafafa;
      padding: 0.27rem;
      border-bottom: 0.03rem solid #d8d8d8;
      .leftIcon {
        margin-top: 0.08rem;
        margin-right: 1rem;
      }
      .rightIcon {
        margin-top: 0.08rem;
        .centerIcon {
          margin: 0 0.276rem;
        }
      }
    }
    .rightIcon {
      margin-top: 0.08rem;
      .centerIcon {
        margin: 0 0.267rem;
      }
    }
  }
  .underView {
    margin-top: 1rem;
    height: 8.65rem;
    position: relative;
  }
  .imgView {
    height: 30%;
    margin-bottom: 2.13rem;
    .imgItem {
      position: absolute;
      top: 2.67rem;
      left: 2.67rem;
    }
  }
  .btnView {
    margin-top: -3rem;
    padding: 0 0.267rem;
    .btnItem {
      margin: 0.267rem 0;
    }
  }
  .bottomView {
    margin-bottom: 1rem;
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    .bottomItem {
      font-size: 0.373rem;
      margin: 0 0.267rem;
      .iconItem {
        margin-right: 0.13rem;
      }
    }
  }
}
</style>
